<template>
  <!-- 卡片视图 -->
  <el-card class="pagetools">
    <!-- 左右结构 -->
    <el-row type="flex">
      <el-col>
        <div class="before" v-if="showbefor">
          <i class="el-icon-info"></i>
          <slot name="before">
            <span>本月：社保在缴 公积金在缴 增员 减员 入职 离职</span>
          </slot>
        </div>
      </el-col>
      <el-col>
        <div class="after">
          <slot name="after">
            <el-button type="primary" size="mini">导入</el-button>
            <el-button type="primary" size="mini">+ 新增员工</el-button>
          </slot>
        </div>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
export default {
  props: ["showbefor"],
  name: "pagetools"
};
</script>

<style lang="scss" scoped>
.pagetools {
  .before {
      border: 1px solid #91d5ff;
      background-color: #e6f7ff;
      border-radius: 5px;
      padding: 8px;
      font-size: 14px;
      i{
          color: #409eff;
          margin-right: 10px;
      }
  }
  .after{
      text-align: right;
  }
}
</style>
